<!--下面提供的代码可用于一个文本输入框对应多种校验规则：-->
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
  请输入用户名：<input type="text" name="userName"/>
  请输入密码：<input type="text" name="password"/>
  请输入手机号码：<input type="text" name="phoneNumber"/>
  <button>提交</button>
</form>
<script>
  /************************策略对象************************/
  var strategies = {
    isNonEmpty: function (value, errorMsg) {
      if (value === '') {
        return errorMsg
      }
    },
    minLength: function (value, length, errorMsg) {
      if (value.length < length) {
        return errorMsg
      }
    },
    isMobile: function (value, errorMsg) {
      if (!/^1[3|5|8][0-9]{9}$/.test(value)) {
        return errorMsg
      }
    }
  }

  /************************Validator 类************************/
  var Validator = function () {
    this.cache = [];
  }

  Validator.add = function (dom, rules) {

    for (var i = 0, l = rules.length; i < l; i++) {
      var self = this;
      (function (rule) {
        var strategyArr = rule.strategy.split(':')
        var strategy = strategy.shift();
        strategyArr.unshift(dom.value);
        strategyArr.push(rule.errorMsg);
        self.cache.push(function () {
          return this.strategies[strategy].apply(dom, strategyArr)
        })
      })(rules[i])
    }
  }
  // Validator.prototype.add = function (dom, rules) {
  //   var self = this;
  //   for (var i = 0, rule; rule = rules[i++];) {
  //     (function (rule) {
  //       var strategyAry = rule.strategy.split(':');
  //       var errorMsg = rule.errorMsg;
  //       self.cache.push(function () {
  //         var strategy = strategyAry.shift();
  //         strategyAry.unshift(dom.value);
  //         strategyAry.push(errorMsg)
  //         return strategies[strategy].apply(dom, strategyAry)
  //       })
  //     })(rule)
  //   }
  // }
  // Validator.prototype.start = function () {
  //   for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
  //     var errorMsg = validatorFunc();
  //     if (errorMsg) {
  //       return errorMsg
  //     }
  //   }
  // }
  /***********************客户调用代码**************************/
  var registerForm = document.querySelector('#registerForm');
  var validateFunc = function () {
    var validator = new Validator();
    validator.add(registerForm.userName, [
      {
        strategy: 'isNonEmpty',
        errorMsg: '用户名不能为空'
      },
      {
        strategy: 'minLength:6',
        errorMsg: '用户名长度不能小于10位'
      }
    ])
    validator.add(registerForm.password, [
      {
        strategy: 'minLength:6',
        errorMsg: '密码长度不能小于6位'
      }
    ])
    validator.add(registerForm.phoneNumber, [
      {
        strategy: 'isMobile',
        errorMsg: '手机号码格式不正确'
      }
    ])
    var errorMsg = validator.start()
    return errorMsg;
  }
  registerForm.onsubmit = function () {
    var errorMsg = validateFunc();
    if (errorMsg) {
      alert(errorMsg);
      return false;
    }
  }
</script>
</body>
</html>























